<template>
	<div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">首页</div>
			<img src="../assets/navgation.png" class="navigation" @click="navigation">
		</header>
		<div class="navigation_d" v-show="isShow">
			<div>首页</div>
			<div>我的</div>
			<div>搜索</div>
			<div>消息</div>
		</div>
		<div class="bannerfig">
			<mt-swipe :auto="4000">
			  <mt-swipe-item v-for="item in bannerList" class="bannerpic"  >
			  		<img :src="item.img" @click="nav(item.id,item.value)">
			  </mt-swipe-item>
			</mt-swipe>
		</div>
		<!--标题栏-->
		<div class="titlebar">
			<div class="toaltitle">
				<div class="sametitle" v-for="item in modeList"  @click="modelbut(item.value)">
					<div class="sametitleimg"><img :src="item.img"></div>
					<p class="sametitlename">{{item.name}}</p>
				</div>
				
			</div>
		</div>
		<!--广告位1-->
		<div class="sechandbanner" v-if="len == 1"><img :src="advertOne"></div>
		<div class="sechandbanner" v-else>
			<mt-swipe :auto="4000">
			  <mt-swipe-item v-for="item in sechandList" class="bannerpic">
			  		<img :src="item.img">
			  </mt-swipe-item>
			</mt-swipe>	
		</div>
		<div class="findgood"><img src="../assets/findgood.jpg"></div>
		<div class="explosmain">
			<div class="samexplost" v-for="item in findGood" @click="faxain(item.id,item.value)">
				<img :src="item.img">
			</div>
		</div>
		<div class="findgood"><img src="../assets/acrivepic.jpg"></div>
		<div class="activemain">
			<div class="sameactive" v-for="item in actList">
				<img :src="item.img">
			</div>
		</div>
		<div class="findgood"><img src="../assets/jingxuan.png"></div>
		<div class="sift">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<li v-for='item in sift' v-if="item.spuPlatform == 'yh'" @click="yuy(item.id)">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
					<div class="introduce">{{item.goodsName}}</div>
					<span class="jin"><img src='../assets/jingxaun.png'></span>
					<div class="price">
						<span>￥{{item.price}}</span>/
						<span>降{{item.couponMoney}}元</span>
					</div>
					<div class="rush">
						<span>￥{{item.conPrice}}</span>
						<span>已抢{{item.wlCommissionShare}}件</span>
					</div>
					<div class="share">
						<div class="earn">立即抢购</div>
					</div>
				</li>
				<li v-for='item in sift' v-if="item.spuPlatform == 'jd'" @click="jdy(item.id,item.couponMoney)">
					<img :src="item.mainImageUrl">
					<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
					<div class="introduce">{{item.goodsName}}</div>
					<span class="jin"><img src='../assets/jingxaun.png'></span>
					<div class="price">
						<span>￥{{item.price}}</span>/
						<span>降{{item.couponMoney}}元</span>
					</div>
					<div class="rush">
						<span>￥{{item.conPrice}}</span>
						<span>已抢{{item.totalSales}}件</span>
					</div>
					<div class="share">
						<div class="earn">立即抢购</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { InfiniteScroll } from 'mint-ui';
	export default {
		data() {
			return {
				bannerList:[],
				modeList:[],
				len:'',
				advertOne:'',
				sechandList:[],
				findGood:[],
				actList:[],
				sift:[],
				isShow:false,
				loading: false,
				index: 0,
				token:''
			}
		},
		created() {
			this.singInfo(this.index);
			//轮播图
			var bannerUrl = BaseUrl+'index/banners';
			this.$http.get(bannerUrl).then(res => {
			    
			    if(res.data.code == "10000"){
			    	this.bannerList = res.data.data;
//			    	console.log(res.data.data);
			    }
			 })
			//八大模块
			var modelUrl = BaseUrl+'index/models';
			this.$http.get(modelUrl).then(res => {
			   if(res.data.code == "10000"){
//			   	console.log(res.data.data);
			   	 this.modeList = res.data.data;
			   } 
			   
			 })
			//二手好货
			var sechandUrl = BaseUrl+'index/advertOnes';
			this.$http.get(sechandUrl).then(res => {
			   if(res.data.code == "10000"){
			   	    var len = res.data.data.length;
			   	    this.len = len;
			   	    if(len == 1){
			   	    	this.advertOne = res.data.data[0].img;
			   	    	//console.log(res.data.data[0].img)
			   	    }else{
			   	    	this.sechandList = res.data.data
			   	    }
			   	// console.log(res.data.data.length);
			   } 
			   
			 })
			//发现好货
			var findgoodUrl = BaseUrl+'index/findgood';
			this.$http.get(findgoodUrl).then(res => {
			   if(res.data.code == "10000"){
//			   		console.log(res.data.data);
			   		this.findGood = res.data.data;
			   } 
			   
			 })
			//热门活动商品
			var activeUrl = BaseUrl +'index/hoting';
//			console.log(activeUrl)
			this.$http.get(activeUrl).then(res => {
			   if(res.data.code == "10000"){
			   		console.log(res.data.data);
			   		this.actList = res.data.data;
			   } 
			   
			 })
			
		},
		
		methods: {
			modelbut:function(obj){
				//alert(obj)
				if(obj == "jd"){
					this.$router.push({ path: '/jd' })
				}
				else if(obj == "inviteVip"){

				}
				else if(obj == "zdtm"){
					this.$router.push({ path: '/integsale' })
				}
				else if(obj == "yh"){

				}
			},
			nav:function(id,value){
				window.location.href = value
			},
			faxain:function(id,value){
				window.location.href = value
			},
			navigation:function(){
				this.isShow = !this.isShow;
			},
			singInfo(index){
				//为你精选
				var siftUrl = BaseUrl+"goods/list";
//				console.log(siftUrl)
				this.$http.get(siftUrl+"?length=10&orderType=couponMoneyDesc&start="+this.index).then(res => {
				   if(res.data.code == "10000"){	
//				   	console.log(res.data.data.list)
				   		this.sift = this.sift.concat(res.data.data.list)
				   } 
				   if(res.data.data.isMore == "none") {
						this.loading = true;
						return;
					} else if(res.data.data.isMore == "have") {
						this.loading = false;
						this.index++;
					}
				   
				 })
			},
			loadMore(){
				this.loading = true;
				setTimeout(() => {
					this.singInfo(this.index);
					this.loading = false;
				}, 2000);
			},
			jdy:function(id,couponMoney){
				var id= id
				var jdurl;
				this.token = localStorage.setItem('yunId', this.token);
				
				if(couponMoney == 0){
					jdurl = BaseUrl + "jd/getUrl?appId=gzh" + "&spuId=" + id + "&token="+ this.token
				}else{
					jdurl = BaseUrl + "jd/getConUrl/?appId=gzh" + "&spuId=" + id + "&token=" + this.token
				}
				
				this.$http.get(jdurl).then(res => {

					if(res.data.code == "10000") {
						if(res.data.data != ''){
							window.location.href = res.data.data
						}else{
							this.$router.push({
								path: '/couponEmpty?' + "id=" + id 
							})
							location.reload();
						}
					} else {
					}

				})
				
			},
			yuy: function(id) {
				var id = id
				this.$router.push({
					path: '/redpackage?type=1' + "&goodsId=" + id 
				})
			}
		}
	}
</script>

<style scoped="scoped">
.aui-title{
	margin-left: 2.5rem !important
}
.navigation {
	height: 0.6rem;
	float:right;
	margin: 0.2rem 0.25rem 0 0;
}
.navigation_d{
	width: 1.8rem;
	position: absolute;
	z-index: 3;
	top: 1rem;
	right: 0;
}
.navigation_d div{
	/*display: none;*/
	width: 100%;
	height: 0.8rem;
	text-align: center;
	line-height: 0.8rem;
	background: rgba(0,0,0,0.5);
	margin-bottom: 0.05rem;
	color: #FFFFFF;
}
/***轮播图****/
.bannerfig{
	width: 100%;
	height: 4.0rem;
	margin-top: 1rem;
}
.bannerpic>img{
	width: 100%;
	height: 100%;
}
/****标题栏****/
.titlebar{
	padding: 0.2rem;
	background-color: #fff;
}
.toaltitle{
	font-size: 0.0rem;
}
.sametitle{
	display: inline-block;
	width: 25%;
	
	
}
.sametitleimg{
	width:0.7rem;
	height: 0.7rem;
	margin:0 auto;
}
.sametitleimg>img{
	width:100%;
	height: 100%;
	border-radius: 50%;
}
.sametitlename{
	text-align: center;
	font-size: 0.28rem;
	color: #323232;
}
/***二手好货广告位****/
.sechandbanner{
	width: 100%;
	height: 2.6rem;
	margin-top: 0.1rem;
	background-color: red;
}
.sechandbanner>img{
	width:100%;
	height: 100%
}
/****发现好货****/
.findgood{
	width: 100%;
	height: 0.8rem;

}
.findgood>img{
	width:100%;
	height: 100%;
}
.explosmain{
	font-size: 0.0rem;
}
.samexplost{
	width:32.8%;
	height: 3.0rem;
	display: inline-block;
	margin-left: 0.06rem;
	margin-top: 0.06rem;
}
.samexplost:nth-child(1){
	margin-left: 0.0rem;
}
.samexplost:nth-child(4){
	margin-left: 0.0rem;
}
.samexplost>img{
	width: 100%;
	height: 100%;
}
.activemain{
	width: 100%;
	font-size: 0.0rem;
	overflow: hidden;
}
.sameactive{
	width: 49%;
	height: 2.0rem;
	margin-left: 0.06rem;
	margin-bottom: 0.06rem;
	float: left;
}
.sameactive>img{
	width: 100%;
	height: 100%;
	float: left;
}
.sift{
	width: 100%;
	overflow: hidden;
}
.sift ul{
	width: 100%;
	overflow: hidden;
}
.sift{
	position: relative;
}
.sift li:nth-child(odd){
	width: 49%;
	/*height: 6.27rem;*/
	float: left;
	list-style: none;
	margin: 0 0.06rem 0.12rem 0;
}
.sift li:nth-child(even){
	width: 49%;
	/*height: 6.27rem;*/
	float: left;
	list-style: none;
	margin: 0 0 0.12rem 0.06rem;
}
.sift ul li>img{
	width: 100%;
	height: 3.69rem;
	/*display: block;*/
}
.introduce{
	padding: 0 0.14rem;
	height: 0.7rem;
	text-indent: 0.7rem;
	color: #333333;
	font-size: 0.24rem;
	font-family: "PingFangSC-Regular";
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 0.16rem;
}
.jin{
	position: relative;
	top: -0.8rem;
	left: 0.15rem;
}
.jin img{
	width: 0.52rem;
	height: 0.28rem;
	display: block;
}

.price{
	font-size: 0.24rem;
	padding: 0 0.14rem;
	font-family: "PingFangSC-Regular";
	margin-top: -0.4rem;
}
.price span:last-child{
	display: inline-block;
	margin-left:0.1rem ;
	color: #FF2040;
	font-family: "PingFangSC-Regular";
}
.price span:first-child{
	display: inline-block;
	margin-right:0.1rem ;
	color: #333333;
	text-decoration: line-through;
	font-family: "PingFangSC-Regular";
}

.rush{
	padding: 0 0.14rem;
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.rush span:last-child{
	font-size: 0.2rem;
	color: #ABABAB;
	font-family: "PingFangSC-Regular";
}
.rush span:first-child{
	color: #FF2040;
	font-size: 0.3rem;
	font-family: "PingFangSC-Regular";
}
.rush span:first-child h{
	color: #FF2040;
	font-size: 0.2rem;
	font-family: "PingFangSC-Regular";

}
.share{
	width: 100%;
	height: 0.76rem;
	border-top: 1px dashed  #CBCBCB ;
	margin-top: 0.13rem;
}
.earn{
	width: 3.4rem;
	height: 0.5rem;
	background: #FF2040;
	border-radius: 0.2rem;
	margin: 0 auto;
	text-align: center;
	line-height: 0.5rem;
	margin-top: 0.13rem;
	font-size: 0.24rem;
	color: #FFFFFF;
	font-family: "PingFangSC-Regular";
}
.jdSymbol {
	width: 0.67rem;
	height: 0.67rem;
	background: url(../assets/jd.png);
	background-size: 100% 100%;
	display: block;
	position: relative;
	margin-top: -0.755rem;
	float: right;
}
.yhSymbol {
	width: 0.67rem;
	height: 0.67rem;
	background: url(../assets/yh.png);
	background-size: 100% 100%;
	display: block;
	position: relative;
	margin-top: -0.755rem;
	float: right;
}
</style>